<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人博客 - 主页</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <style>
        /* 新增按钮样式 */
        .carousel-control-prev, .carousel-control-next {
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.3s ease;
        }
        .carousel-control-prev:hover, .carousel-control-next:hover {
            background-color: rgba(0, 0, 0, 0.8);
        }
        .carousel-control-prev-icon, .carousel-control-next-icon {
            width: 20px;
            height: 20px;
            filter: invert(100%); /* 白色图标 */
        }

        /* 新增回到顶部按钮样式 */
        #backToTopBtn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 40px;
            height: 40px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            display: none; /* 默认隐藏 */
            transition: opacity 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        #backToTopBtn:hover {
            opacity: 0.8;
        }

        #backToTopBtn svg {
            width: 24px;
            height: 24px;
        }
    </style>
</head>
<body>
    <header class="bg-primary text-white py-3">
        <div class="container">
            <h1>个人博客</h1>
        </div>
    </header>

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="index.html">主页</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="list.html">文章列表</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <main class="container my-4">
        <div class="row">
            <div class="col-md-8">
                <!-- 修改走马灯效果为文字内容 -->
                <div id="carouselExample" class="carousel slide mb-4" data-bs-ride="carousel">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <div class="d-flex justify-content-center align-items-center h-100">
                                <div class="text-center">
                                    <h3>教育改革：在线学习的优势</h3>
                                    <p>在线学习打破了地域限制，让更多人有机会接受优质教育。</p>
                                </div>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="d-flex justify-content-center align-items-center h-100">
                                <div class="text-center">
                                    <h3>环境保护：绿色出行的意义</h3>
                                    <p>绿色出行不仅减少了环境污染，还促进了健康生活方式。</p>
                                </div>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <div class="d-flex justify-content-center align-items-center h-100">
                                <div class="text-center">
                                    <h3>体育精神：运动与健康的结合</h3>
                                    <p>运动不仅强身健体，还能培养坚韧不拔的精神。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- 修改按钮样式 -->
                    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Previous</span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#carouselExample" data-bs-slide="next">
                        <span class="carousel-control-next-icon" aria-hidden="true"></span>
                        <span class="visually-hidden">Next</span>
                    </button>
                </div>

                <article class="mb-4">
                    <h2 class="mb-3">欢迎来到我的博客</h2>
                    <p>这是一个基于Bootstrap的个人博客示例。你可以在这里找到最新的文章和分享。</p>
                </article>
                <article class="mb-4">
                    <h2 class="mb-3">最近更新的文章</h2>
                    <ul class="list-unstyled">
                        <li><a href="detail.html">文章标题1</a></li>
                        <li><a href="detail.html">文章标题2</a></li>
                        <li><a href="detail.html">文章标题3</a></li>
                        <li><a href="detail.html">文章标题4</a></li>
                        <li><a href="detail.html">文章标题5</a></li>
                    </ul>
                </article>
                <!-- 新增文章卡片 -->
                <div class="card mb-4">
                    <img src="https://via.placeholder.com/800x400" class="card-img-top" alt="文章封面">
                    <div class="card-body">
                        <h5 class="card-title">文章标题6</h5>
                        <p class="card-text">这是一篇关于技术的文章，详细介绍了如何使用Bootstrap开发响应式网页。</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <a href="detail.html" class="btn btn-primary">阅读更多</a>
                            <div class="d-flex align-items-center">
                                <button class="btn btn-outline-secondary btn-sm me-2" onclick="likeArticle(this)">
                                    <i class="bi bi-hand-thumbs-up"></i> 点赞
                                </button>
                                <span class="text-muted">2023-05-03</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <aside class="bg-light p-3">
                    <h3>关于我</h3>
                    <p>
                        我是一名充满激情与创新精神的青年企业家，专注于科技与商业领域的融合发展。多年来，我始终致力于通过技术创新推动企业成长，为企业和社会创造更大的价值。作为一名创业者，我曾成功创立并运营多家公司，涉及人工智能、电子商务和绿色能源等多个领域。我的团队和我一起，不断探索前沿技术，力求为用户提供卓越的产品和服务。除了商业成就，我还热衷于公益事业，积极参与社会公益活动，努力回馈社会。我相信，企业家的责任不仅在于追求利润，更在于用实际行动影响和改善世界。
                    </p>
                </aside>
                <!-- 新增社交链接 -->
                <aside class="bg-light p-3 mt-3">
                    <h3>社交链接</h3>
                    <ul class="list-unstyled">
                        <li><a href="#">GitHub</a></li>
                        <li><a href="#">Twitter</a></li>
                        <li><a href="#">LinkedIn</a></li>
                    </ul>
                </aside>
            </div>
        </div>
    </main>

    <footer class="bg-dark text-white text-center py-3">
        <div class="container">
            &copy; 2025 吴晓宇个人博客. All rights reserved.
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/script.js"></script>
    <script>
        // 新增变量：模拟首页文章数据
        const homeArticles = [
            { title: '科技前沿：量子计算的未来', content: '量子计算是计算机科学领域的一项革命性技术...', imageUrl: '科技.jpeg' },
            { title: '健康生活：如何保持良好的睡眠质量', content: '睡眠是人体恢复和修复的重要过程...', imageUrl: '睡眠.jpeg' },
            { title: '教育改革：个性化学习的探索', content: '随着科技的发展，教育方式也在不断革新...', imageUrl: '教育.jpeg' },
            { title: '环境保护：减少塑料污染的方法', content: '塑料污染是全球面临的重要环境问题...', imageUrl: '环保.jpeg' },
            { title: '文化传承：非物质文化遗产的保护', content: '非物质文化遗产是人类文明的重要组成部分...', imageUrl: '非遗.jpeg' }
        ];

        // 修改文章卡片生成逻辑，优先使用 homeArticles 中的数据
        document.addEventListener('DOMContentLoaded', function () {
            const articleContainer = document.querySelector('.row .col-md-8');
            homeArticles.forEach(article => {
                const card = document.createElement('div');
                card.className = 'card mb-4';
                card.innerHTML = `
                    <img src="${article.imageUrl}" class="card-img-top" alt="文章封面">
                    <div class="card-body">
                        <h5 class="card-title">${article.title}</h5>
                        <p class="card-text">${article.content}</p>
                        <a href="detail.html" class="btn btn-primary" onclick="setArticleData('${article.title}', '${article.content}', '${article.imageUrl}')">阅读更多</a>
                    </div>
                `;
                articleContainer.appendChild(card);
            });
        });

        // 新增函数：设置文章数据
        function setArticleData(title, content, imageUrl) {
            localStorage.setItem('articleTitle', title);
            localStorage.setItem('articleContent', content);
            localStorage.setItem('articleImageUrl', imageUrl);
        }

        // 新增回到顶部功能
        document.addEventListener('DOMContentLoaded', function () {
            const backToTopBtn = document.getElementById('backToTopBtn');

            // 监听滚动事件，控制按钮显示与隐藏
            window.addEventListener('scroll', function () {
                if (window.scrollY > 300) {
                    backToTopBtn.style.display = 'block';
                } else {
                    backToTopBtn.style.display = 'none';
                }
            });

            // 绑定点击事件，实现平滑滚动到顶部
            backToTopBtn.addEventListener('click', function () {
                window.scrollTo({
                    top: 0,
                    behavior: 'smooth'
                });
            });
        });
    </script>

    <!-- 新增回到顶部按钮 -->
    <button id="backToTopBtn" title="回到顶部">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rocket">
            <path d="M16 13v9a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3m1 12v-7a2 2 0 0 1 2-2h3m-6 0h6"></path>
            <path d="M12 13v9"></path>
            <path d="M12 1v2"></path>
            <path d="M12 6H4"></path>
            <path d="M16 6h5"></path>
            <path d="M19 11v5"></path>
        </svg>
    </button>

</body>
</html>